$(function () {
  // 渲染产品数据
  var currentPage = 1;
  var pageSize = 2;
  // 图片数组
  var picArr = [];

  function render() {
    $.ajax({
      url: '/product/queryProductDetailList',
      data: {
        page: currentPage,
        pageSize: pageSize
      },
      dataType: 'json',
      success: function (info) {
        $('tbody').html(template('tmp-pro', info));
        $(".pagination").bootstrapPaginator({
          //设置版本号
          bootstrapMajorVersion: 3,
          // 显示第几页
          currentPage: currentPage,
          // 总页数
          totalPages: Math.ceil(info.total / pageSize),
          //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
          onPageClicked: function (event, originalEvent, type, page) {
            // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
            currentPage = page;
            render();
          }
        })
      }
    })
  }

  render();

  // 动态渲染二级分类下拉列表
  $.ajax({
    url: '/category/querySecondCategoryPaging',
    data: {
      page: 1,
      pageSize: 100
    },
    dataType: 'json',
    success: function (info) {
      $('.check-cate').html(template('tmp-chek', info));
    }
  })

  // 当用户点击下拉列表选项时，改变选中项，保存对应id到隐藏域
  $('.check-cate').on('click', 'a', function () {
    $('.d-title').text($(this).text());
    $('[name="brandId"]').val($(this).data('id')).change();
  })

  // 点击上传图片时，将图片保存到图片数据库，将返回回来的图片地址保存在隐藏域
  $("#file").fileupload({
    dataType: "json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done: function (e, data) {
      picArr.unshift('<img src="' + data.result.picAddr + '" height="100">');
      // 将图片添加到图片盒子中
      $('.img-box').prepend(picArr[0]);
      if (picArr.length > 3) {
        picArr.pop();
        $('.img-box img:last-child').remove();
      }

      // 图片表单通过验证改变状态
      if (picArr.length == 3) {
        $('#form').data('bootstrapValidator').updateStatus('picStatus', 'VALID');
        $('[name="picArr"]').val(JSON.stringify(picArr));
      }
    }
  });

  // 表单校验
  //使用表单校验插件
  $('#form').bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    // excluded: [':disabled', ':hidden', ':not(:visible)'],
    excluded: [],

    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },

    //3. 指定校验字段
    fields: {
      //对应name表单的name属性
      brandId: {
        trigger: "change", //关键配置
        validators: {
          //不能为空
          notEmpty: {
            message: '请选择二级分类！'
          }
        }
      },
      proName: {
        validators: {
          //不能为空
          notEmpty: {
            message: '商品名称不能为空！'
          }
        }
      },
      proDesc: {
        trigger: "change", //关键配置
        validators: {
          //不能为空
          notEmpty: {
            message: '商品描述不能为空！'
          }
        }
      },
      num: {
        validators: {
          //不能为空
          notEmpty: {
            message: '商品库存不能为空！'
          },
          //正则校验
          regexp: {
            regexp: /^[1-9]\d*$/,
            message: '商品库存格式, 必须是非零开头的数字！'
          }
        }
      },
      size: {
        validators: {
          //不能为空
          notEmpty: {
            message: '商品尺寸不能为空'
          },
          //正则校验
          regexp: {
            regexp: /^[1-5]\d{1}-[1-5]\d{1}$/,
            message: '尺码格式, 必须是 xx-xx,并且尺码在11-55之间！'
          }
        }
      },
      oldPrice: {
        validators: {
          //不能为空
          notEmpty: {
            message: '商品原价不能为空'
          },
          //正则校验
          regexp: {
            regexp: /^[1-9]\d*$/,
            message: '商品原价格式, 必须是非零开头的数字！'
          }
        }
      },
      price: {
        validators: {
          //不能为空
          notEmpty: {
            message: '商品现价不能为空'
          },
          //正则校验
          regexp: {
            regexp: /^[1-9]\d*$/,
            message: '商品现价格式, 必须是非零开头的数字！'
          }
        }
      },
      picStatus: {
        validators: {
          //不能为空
          notEmpty: {
            message: '图片必须上传三张！'
          }
        }
      }
    }

  });

  $("#form").on('success.form.bv', function (e) {
    e.preventDefault();
    //使用ajax提交逻辑
    $.ajax({
      type:'post',
      url:'/product/addProduct',
      data:$('#form').serialize(),
      dataType:'json',
      success:function (info) {
        // 关闭模态框
        $('#addModal').modal('hide');
        // 重置数据
        $('#form').data('bootstrapValidator').resetForm(true);
        $('.d-title').text('请选择二级分类');
        $('.img-box').empty();//清空图片盒子
        // 重置图片数组信息
        picArr=[];
        // 重新渲染第一页
        currentPage=1;
        render();
      }
    });
  });
})